.dashed-bottom {
	border-bottom: $dashed-line;
}

.label-text {
	color: $highlight;
	text-transform: uppercase;
	letter-spacing: 1px;
	font: {
		family: ProximaNovaBold;
		size: 12px;
	}
}

.green-label-text {
	@extend .label-text;
	color: $green;
}

.reset-bs {
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

.text-button {
	@extend .reset-bs;
	color: $highlight !important;
	text-transform: uppercase;
	font: {
		family: ProximaNovaBold;
		size: 12px;
	};
	&:hover {
		color: lighten($highlight, 10%)
	}
}

.bare-input {
	@extend .reset-bs;
	font-family: ProximaNovaIt;
}

.bare-input-button {
	button, button:hover {
		@extend .text-button;
	}

	.form-group {
		margin-bottom: 0 !important;
	}

	input[type="text"], input[type="password"] {
		@extend .bare-input;
	}
}

.ulterius-panel {
	color: $text-color;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	box-shadow: $panel-shadow;
	justify-content: space-between;
	/*
	.fixed {
		input {
			@include reset-bs;

			font-family: ProximaNovaIt;
		}

		button {
			@include reset-bs;
			color: $highlight;
			text-transform: uppercase;
			font: {
				family: ProximaNovaBold;
				size: 12px;
			};
		}
	}
	*/

	.header {
		height: 50px;
		font-family: ProximaNovaSemi;
		font-size: 12px;
		text-transform: uppercase;
		padding: 19px 20px 17px 20px;
		border-bottom: $solid-line;
	}

	.header-center {
		@extend .header;

		height: auto;
		text-align: center;
		border-bottom: none;
	}

	.faded {
		opacity: 0.5;
	}

	.fixed-center {
		text-align: center;
		padding-bottom: 20px;
		margin-left: 20px;
		margin-right: 20px;
		flex: none;
	}

	.header, .fixed, .header-center {
		flex: none;
	}

	.body, .flexible {
		flex-grow: 1;
	}

	.stat-header {
		.right {
			margin-top: -5px;
			color: $highlight;
			font: {
				family: ProximaNovaCond;
				size: 18px;
			};
		}
	}

	.stat-item:last-child {
		margin-right: 0;
	}

	.stat-container {
		.stat-item-head {
			opacity: 0.5;
			text-transform: uppercase;
			font: {
				family: ProximaNova;
				size: 12px;
			};
		}

		background-color: $stat-bg;
		border-bottom: $solid-line;
		padding: 8px 20px 7px 20px;
		margin-bottom: 10px;
	}

	.flex-fixed {
		@extend .fixed;

		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}

	.system-footer {
		@extend .flex-fixed;

		background-color: $stat-bg;
	}

	.graph-item {
		display: flex;
		justify-content: space-between;

		padding: 20px 20px 10px 20px;

		.graph-label {
			text-align: left;
		}

		.graph-bar {
			.progress {
				margin-bottom: 7px;
			}

			margin: {
				top: 6px;
			};
			width: 50%;
			text-align: right;
		}
	}
	.drive-item {
		border-bottom: $dashed-line;
		.popout-row {
			padding: {
				left: 20px;
				right: 20px;
				bottom: 0px;
				top: 0;
			}
			margin-bottom: 20px;
		}
		&:last-child {
			border-bottom: none;
		}
	}
}

.cpu-table {
	td, th {
		padding-right: 10px;
		&:last-child {
			padding-right: 0;
		}
	}
}

.smart-table {
	@extend .cpu-table;
}

.partition-information {
	@extend .cpu-table;
	margin-bottom: 10px;
	p {
		margin-bottom: 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
}

.uploads {
	@extend .ulterius-panel;
	width: 50%;
	float: right;
}

.bar-container {
	padding: 10px;
}

.stat-item-body-text {
	font: {
		family: ProximaNovaCond;
		size: 18px;
	};
}

.stat-item {
	display: inline-block;
	margin-right: 41px;
	line-height: 18px;
	@extend .stat-item-body-text;
}

.foot-stat-item {
	@extend .stat-item;

	&:last-child {
		margin-right: 20px !important;
	}

	&:first-child {
		margin-left: 20px !important;
	}

	line-height: 20px;

	.stat-item-head-text {
		letter-spacing: 1px;
	}

	flex-grow: 1;
	flex-basis: 0;
	margin: {
		top: 15px;
		right: 0;
		bottom: 20px;
	};
	text-align: center;
}

.stat-item-head-text {
	opacity: 0.5;
	text-transform: uppercase;
	font: {
		family: ProximaNova;
		size: 12px;
	};
}

.settings-panel {
	@extend .ulterius-panel;
	justify-content: flex-start;
	z-index: 10;
	position: fixed;
	right: 0px;
	left: calc(100% - 500px);
	height: 100%;
	bottom: 0px;
	top: 0px;
}

.panel-button-bar {
	background-color: $stat-bg;
	height: 40px;
	justify-content: center;
	align-items: center;
	display: flex;
	.panel-button {
		@extend .label-text;
		cursor: pointer;
		padding: {
			left: 30px;
			right: 30px;
		}
	}
	.green-panel-button {
		@extend .green-label-text;
		@extend .panel-button;
	}
}

.toolbar {
	padding: 10px;
	border: {
		bottom: $solid-line;
		top: $solid-line;
	}
	background-color: white;
	flex: none;
	display: flex;
	align-items: center;
	z-index: 3;
	.search-file-bar-cont {
		display: flex;
		justify-content: space-between;
		margin-left: 10px;
		.file-bar {
			width: 52%;
		}
		.search-bar {
			width: 45%;
		}
		.file-bar, .search-bar {
			@extend .bare-input-button;
			.input-group {
				border: $solid-line !important;
				box-shadow: $hole-shadow !important;
			}
			flex: none;
			input[type="text"] {
				font-family: ProximaNova;
			}
		}
	}
}

.fileList {
	thead {
		position: sticky;
    top: 118px;
    background-color: rgb(255, 255, 255);
		box-shadow: 0px 1px rgb(236, 237, 242);
		z-index: 15;
	}
	tbody {
		td[colspan='3'] {
			padding-top: 3px;
			text-align: center;
		}
		tr {
			&:hover {
				background-color: rgba(100, 100, 100, 0.1);
			}
			transition: background-color 0.075s ease-in-out;
		}
	}
}

.toolbar-right-align {
	height: 100%;
	display: flex;
	flex-grow: 1;
	justify-content: flex-end;
}

.toolbar-text-box {
	@extend .bare-input-button;
	.input-group {
		border: $solid-line !important;
		box-shadow: $hole-shadow !important;
		//height: 100%;
	}
	input[type="text"] {
		font-family: ProximaNova;
		//font-size: 12px;
		//height: 100%;
	}
	span.input-group-addon {
		@extend .label-text;
		@extend .reset-bs;
		color: $ulterius-light-grey;
		padding-right: 5px;
		padding-top: 13px;
	}
	margin-right: 10px;
	&:last-child {
		margin-right: 0;
	}
}

.dark-label-text {
	@extend .label-text;
	color: $ulterius-light-grey;
}

.toolbar-button {
	padding: 10px 15px 10px 15px;
	margin-right: 10px;
	background-color: white;
	cursor: pointer;
	border: $solid-line;
	border-bottom: solid $line-color 2px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	span {
		line-height: inherit;
	}
	&:hover {
		background-color: darken(white, 2%);
	}
	&:active {
		border-bottom-width: 1px;
		margin-top: 1px;
	}
	&:last-child {
		margin-right: 0;
	}
}

.merge-right {
	margin-right: 0;
	border-right: none;
	padding-right: 14;
}

.toolbar-label {
	padding: 11px 15px 10px 17px;
	margin-right: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	&:last-child {
		margin-right: 0;
	}
}

.toolbar-button-bare {
	@extend .toolbar-button;
	background: none;
	margin-right: 0;
	padding-right: 15px;
	border-color: rgba(0, 0, 0, 0);
	&:hover {
		background: none;
		color: $ulterius-light-grey;
	}
}

.toolbar-button-primary {
	@extend .toolbar-button;
	background-color: $ulterius-light-grey;
	border-color: $ulterius-grey;
	color: white;
	&:hover {
		background-color: darken($ulterius-light-grey, 2%)
	}
}

.fixed-toolbar {
	@extend .toolbar;
	position: fixed;
}

.gauge-box {
	flex: none;
	margin: auto;
	width: 100px;
}

.gauge-outer {
	text-align: center;
	.stat-item-head-text {
		letter-spacing: 1px;
	}
}

.gauge {
	width: 100px;
	height: 75px;
	text {
		display: none;
	}
}

.double-header {
	height: 50px;
	font-family: ProximaNovaSemi;
	font-size: 12px;
	text-transform: uppercase;
	padding: 19px 20px 17px 20px;
	border-bottom: $solid-line;
	display: flex;
	justify-content: space-between;
}

.camera-header {
	@extend .double-header;
	cursor: pointer;
}

.popout-arrow {
	@extend .label-text;
	cursor: pointer;
	display: inline-block;
}

.popout-content-container {
	text-align: left;
	border: $solid-line;
	padding: 10px;
	background-color: white;
	box-shadow: $panel-shadow;
	overflow: auto;
	z-index: 20;
	table {
		width: 100%;
	}
}

.popout-row {
	.popout-container {
		display: inline-block;
		margin-right: 10px;
		&:last-child {
			margin-right: 0;
		}
	}
	.extra-table-arrow {
		display: inline-block;
	}
}
